<template>
  <view :class="types" class="disFlxCC py-30">
    <view class="pb-14 disFlxAC" style="height: 118rpx">
      <text v-if="types === 'waiting'" class="ali-icon color9" style="font-size: 118rpx">
        &#xe8c5;
      </text>
      <text v-else class="ali-icon colorF" style="font-size: 104rpx">
        {{ types === 'success' ? '&#xe663;' : '&#xe724;' }}
      </text>
    </view>
    <view class="pb-8 fz-18 fw-7 px-30" :class="{ colorF: types !== 'waiting' }">
      {{ title }}
    </view>
    <view
      v-if="content"
      class="pb-14 fz-14 px-25 fontTC"
      :class="types === 'waiting' ? 'color9' : 'colorF'"
    >
      {{ content }}
    </view>
    <slot name="button">
      <view class="disFlxAC py-10">
        <TButton
          v-if="cancelText"
          :text="cancelText"
          :customStyle="{
            minWidth: '176rpx',
            height: '64rpx',
            color: types === 'success' || types === 'waiting' ? '#2878FF' : '#ea5e0e',
            lineHeight: '60rpx',
            border: `solid 1px ${types === 'waiting' ? '#2878FF' : '#FFF'}`,
            borderRadius: '64rpx',
            backgroundColor: '#FFF',
          }"
          @click="cancel"
        ></TButton>
        <TButton
          v-if="confirmText"
          :text="confirmText"
          :class="{ 'ml-12': !!cancelText }"
          :customStyle="{
            minWidth: '176rpx',
            height: '64rpx',
            color: types === 'waiting' ? '#FFF' : types === 'success' ? '#2878FF' : '#ea5e0e',
            lineHeight: '60rpx',
            border: `solid 1px ${types === 'waiting' ? '#2878FF' : '#FFF'}`,
            borderRadius: '64rpx',
            backgroundColor: types === 'waiting' ? '#2878FF' : '#FFF',
          }"
          :openType="confirmOpenType"
          @click="confirm"
        ></TButton>
      </view>
    </slot>
  </view>
</template>

<script lang="ts" setup>
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import type { ExtractPropTypes, PropType } from 'vue';
  import { basicProps } from './props';

  export type TResultProps = ExtractPropTypes<typeof basicProps>;

  defineProps(basicProps);

  const emit = defineEmits(['cancel', 'confirm']);
  const cancel = () => {
    emit('cancel');
  };
  const confirm = () => {
    emit('confirm');
  };
</script>

<style lang="scss" scoped>
  $color-primary: #2878ff;
  $color-inverse: #ffffff;
  $color-placeholder: #999996;
  $color-error: #ea5e0e;

  .success {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%),
      $color-primary;
  }
  .error {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%),
      $color-error;
  }
  .waiting {
    background: $color-inverse;
  }

  .colorP {
    color: $color-primary;
  }
  .colorF {
    color: $color-inverse;
  }
  .color9 {
    color: $color-placeholder;
  }
</style>
